<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 移动网页必须设置 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>现场</title>
    
    <link rel="stylesheet" href="./font_s/iconfont.css">
    <script src="./font_s/iconfont.js"> </script>
    <style>
         .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        h3,
        h2,
        ul,
        p,
        body {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        .bnav {
            position: fixed;
            /* 固定的盒子 */
            left: 0;
            bottom: 0;
            width: 100%;
            /* 不设置为内容宽度 */
            background-color: #fff;
            z-index: 9;
            display: flex;
            /* 横着放 */
        }

        .bnav>li {
            width: 25%;
            text-align: center;
        }

        .bnav svg {
            font-size: 40px;
            line-height: 50px;
        }

        .bnav p {
            font-size: 14px;
            line-height: 28px;
        }

        .bnav a {
            color: #333;
        }

        body {
            min-width: 320px;
            margin-bottom: 80px;
            /* 最下面的东西可以显示（不会被nav挡住） */
        }

        .tnav {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            background-color: #fff;
            z-index: 8;
            display: flex;
        }

        .tnav>li {
            width: 25%;
            text-align: center;
        }

        .tnav p {
            line-height: 28px;
        }

        #header>ul>li li:last-child {
            font-size: 8px;
            color: rgb(187, 81, 81);
        }

        #header>ul>li li:first-child {
            border-bottom: #000;
        }

        .tnav a {
            color: #333;
            font-size: 20px;
        }

        img {
            display: block;
            border: none;
        }


        .jlist {
            margin: 5px;
            display: flex;
            flex-wrap: wrap;
            /* 换行 */
        }

        .jlist li {
            width: 40%;
            flex-grow: 1;
            /* 平分剩余空间 */
            margin-right: 5px;
            margin-bottom: 8px;
        }

        .jlist div {
            position: relative;
        }

        .jlist img {
            width: 100%;
        }

        .type {
            position: absolute;
            right: 5px;
            top: 5px;
            color: #fff;
            background-color: #0f0;
            padding: 3px 8px;
            font-size: 12px;
            font-weight: bold;
            /* 加粗 */
            letter-spacing: 2px;
            /* 间距 */
        }

        .info {
            position: absolute;
            right: 5px;
            bottom: 5px;
            color: #fff;
            font-size: 12px;
            font-weight: bold;
            /* 加粗 */
            letter-spacing: 2px;
            /* 间距 */
        }

        .jlist h3 {
            font-size: 14px;
            line-height: 24px;
            text-align: center;
        }

        .jlist p {
            font-size: 14px;
            color: #333;
            line-height: 18px;
            text-align: center;
        }

        #list{
            display: flex;
            flex-wrap: wrap;

        }
        .box{
            width: 40%;
            flex-grow: 1;
            margin-left: 5px;

        }
        .box img{
            width: 100%;
        }
    </style>

</head>

<body>

    <div id="header" class="clearfix">
        <ul class="tnav">
            <li>
                <p><a href="index.html">推荐</a></p>
            </li>
            <li>
                <p><a href="guanzhu.html">关注</a></p>
            </li>
            <li>
                <p><a href="#">#回到现场</a></p>
            </li>
            <li>
                <p><a href="shuping.html">写书评</a></p>
            </li>
        </ul>
    </div>


    <div class="content">
        <ul class="jlist">

        </ul>
    </div>
    <div id="footer" class="clearfix">
        <ul class="bnav">
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tushu1"></use>
                </svg>
                <p><a href="index.html">领读</a></p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fenlei"></use>
                </svg>
                <p><a href="fenlei.html">分类</a></p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wuxiaodingdan"></use>
                </svg>
                <p><a href="shuzhuo.html">书桌</a></p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-touxiang2"></use>
                </svg>
                <p><a href="#">我</a></p>
            </li>
        </ul>
    </div>
    <script>
        //定义json数据
        var json = [{
                link: "http://huanqiu.com",
                img: "./images/shuji.1.jpg",
                type: "自制",
                info: "05:30:45",
                title: "四大悲剧：《哈姆雷特》",
                content: " 四大喜剧：《威尼斯商人》、《仲夏夜之梦》、《皆大欢喜》、《第十二夜》"
            },
            {
                link: "http://huanqiu.com",
                img: "./images/shuji.2.jpg",
                type: "自制",
                info: "05:30:45",
                title: "《奥赛罗》",
                content: "四大悲剧：《哈姆雷特》、《奥赛罗》、《李尔王》、《麦克白》。"
            },
            {
                link: "http://huanqiu.com",
                img: "./images/shuji.3.jpg",
                type: "VIP",
                info: "12集全",
                title: "《李尔王》",
                content: "四大喜剧和四大悲剧是指莎士比亚的“四大悲剧”和“四大喜剧”。四大悲剧：《哈姆雷特》、《奥赛罗》、《李尔王》、《麦克白》。 四大喜剧：《威尼斯商人》、《仲夏夜之梦》、《皆大欢喜》、《第十二夜》。莎士比亚流传下来的作品包括37部戏剧、154首十四行诗、两首长叙事诗。他的戏剧有各种主要语言的译本，且表演次数远远超过其他所有戏剧家的作品。"
            },
            {
                link: "http://huanqiu.com",
                img: "./images/shuji.3.jpg",
                type: "自制",
                info: "05:30:45",
                title: "《麦克白》",
                content: "四大喜剧和四大悲剧是指莎士比亚的“四大悲剧”和“四大喜剧”。四大悲剧：《哈姆雷特》、《奥赛罗》、《李尔王》、《麦克白》。 四大喜剧：《威尼斯商人》、《仲夏夜之梦》、《皆大欢喜》、《第十二夜》。莎士比亚流传下来的作品包括37部戏剧、154首十四行诗、两首长叙事诗。他的戏剧有各种主要语言的译本，且表演次数远远超过其他所有戏剧家的作品。"
            }
        ]

        var jlist = document.querySelector(".jlist");

        json.forEach(function (v, i) {
            var nli = document.createElement("li");
            //创建一个HTML元素li
            nli.innerHTML = `<div>
        <a href="${v.link}"><img src="${v.img}" alt=""></a>
        <span class="${v.type}">自制</span>
        <span class="${v.info}">05:30:45</span>
    </div>
    <h3>${v.title}</h3>
    <p>${v.content}</p>`;
            //反引号，es6,内部可包括引号和变量
            jlist.appendChild(nli);
            //在jlist的内部最后增加元素
        })
        
    </script>



<div id="list"></div>

    <script>
        //异步    数据   JSON、
        //restful架构
        //AJAX请求：get,post
        //原生的ajax、封装的ajax
        //mock:数据模拟，taobao  rap2

        var xmlhttp;
		if (window.XMLHttpRequest) {
			//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
			xmlhttp = new XMLHttpRequest();
		} else {
			// IE6, IE5 浏览器执行代码
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function () {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//xmlhttp.responseText;
				//你的ajax代码写在这里，其他位置除了open的前两个参数都不需要也不要改变。
				//ajax加载成功之后的代码执行位置
			
				console.log(xmlhttp.responseText)
                var jarr=JSON.parse(xmlhttp.responseText);
                for(v of jarr){
                    var ndiv=document.createElement("div");
                    ndiv.classList.add("box");//非必须要的  新加的div指定类名
                    ndiv.innerHTML=`
                        <img src="${v.pic}">
                        <h3>${v.title}</h3>
                        <p>${v.content}</p>
                    `;
                    list.appendChild(ndiv);
                }
				//只有用http的方式查看网页的运行结果才可以避免用本地网页的方式查看ajax运行结果。
				//vs code中可以使用liver server，post请求用专业的HTTP服务器
			}
		}
		xmlhttp.open("GET", "http://rap2api.taobao.org/app/mock/data/1632421", true);
		xmlhttp.send();
    </script>
</body>

</html>